import React from 'react';
import { Carousel, Toast, Flex, Grid } from 'antd-mobile';
import axios from 'axios'
import './index.scss'
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

// 导航渲染数据
const navs = [
  { id: 1, img: Nav1, title: '整租', path: '/home/list' },
  { id: 2, img: Nav2, title: '合租', path: '/home/list' },
  { id: 3, img: Nav3, title: '地图找房', path: '/map' },
  { id: 4, img: Nav4, title: '去出租', path: '/rent' }
]



export default class Home extends React.Component {

  state = {
    swipers: [],
    groups: []
  }
  componentDidMount() {
    // simulate img loading
    this.loadSwiper()
    this.getGroup()
  }
  // 获取轮播图片
  async loadSwiper () {
    const { data: res } = await axios.get('http://115.159.87.220:8080/home/swiper')
    if (res.status !== 200) return Toast('获取图片失败！', 2, null, false)
    this.setState({
      swipers: res.body
    })
  }
  // 渲染轮播图逻辑代码
  renderSwiper () {
    if (this.state.length === 0) return ''
    return (
      <Carousel autoplay={true} infinite >
        {this.state.swipers.map(item => (
          <a
            key={item}
            href="http://www.alipay.com"
            style={{ display: 'inline-block', width: '100%', height: 212 }}
          >
            <img
              src={`http://115.159.87.220:8080${item.imgSrc}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top', height: 212 }}
            />
          </a>
        ))}
      </Carousel>
    )
  }
  // 渲染导航
  renderNavItem () {
    return navs.map(item=>(
        <Flex.Item key={item.id} onClick={()=>{this.props.history.push(item.path)}}>
          <img src={item.img} alt={item.title} />
          <span>{item.title}</span>
        </Flex.Item>
      )
    )
  }
  // 渲染宫格
  renderGrid = (item) => (
    <div className="girdItem">
      <img className="left" src={'http://115.159.87.220:8080'+item.imgSrc} alt="" />
      <div className="right">
        <h4>{item.title}</h4>
        <h4>{item.desc}</h4>
      </div>
    </div>
  )
  // 请求group数据
  async getGroup () {
    const {data: res} = await axios.get('http://115.159.87.220:8080/home/groups',{
      params: {
        area:'area=AREA%7C88cff55c-aaa4-e2e0'
      }
    })
    if(res.status !== 200) return Toast('获取图片失败！', 2, null, false)
    this.setState({
      groups: res.body
    })
  }
  render () {
    return (
      <div className="home-container">
        <div className="swiper">
          { this.renderSwiper() }
        </div>
        {/* 搜索框 */}
        <Flex className="search-box">
          {/* 左侧白色区域 */}
          <Flex className="search">
            {/* 位置 */}
            <div className="location">
              <span className="name">上海</span>
              <i className="iconfont icon-arrow" onClick={()=>{this.props.history.push('/city')}} />
            </div>

            {/* 搜索表单 */}
            <div className="form">
              <i className="iconfont icon-seach" />
              <span className="text">请输入小区或地址</span>
            </div>
          </Flex>
          {/* 右侧地图图标 */}
          <i className="iconfont icon-map" onClick={()=>{this.props.history.push('/map')}} />
        </Flex>
        {/* 导航栏 */}
        <Flex className="nav-flex">
          { this.renderNavItem() }
        </Flex>
        {/* 租房小组 */}
        <div className="group">
          <div className="title">
            <span>租房小组</span>
            <span>更多</span>
          </div>
          </div>
          {/* 四宫格 */}
          <Grid renderItem={this.renderGrid} square={false} hasLine={false} columnNum={2} data={this.state.groups} />
        </div>
    )
  }

}